<template>
  <div class="page-home">
    <div class="page-left">
      <div class="page-block qingdaogang" @click="viewPort('青岛港')">
        <span class="page-block__text running">
          <CountTo :endVal="qingdaogang.running"></CountTo>
        </span>
        <span class="page-block__text finish">
          <CountTo :endVal="qingdaogang.finish"></CountTo>
        </span>
        <span class="page-block__text accumulative">
          <CountTo :endVal="qingdaogang.accumulative"></CountTo>
        </span>
      </div>
      <div class="page-block yantaigang" @click="viewPort('烟台港')">
        <span class="page-block__text running">
          <CountTo :endVal="yantaigang.running"></CountTo>
        </span>
        <span class="page-block__text finish">
          <CountTo :endVal="yantaigang.finish"></CountTo>
        </span>
        <span class="page-block__text accumulative">
          <CountTo :endVal="yantaigang.accumulative"></CountTo>
        </span>
      </div>
      <div class="page-block rihuoyuedu">
        <ri-huo-yue-du :data="livelinessList"></ri-huo-yue-du>
      </div>
    </div>
    <div class="page-center">
      <div class="leiji">
        <span style="letter-spacing: 0px;">2019.6.1-至今</span>
        <span class="margin-left">流程累计运行数量</span>
        <span class="leiji__count margin-lr">
          <CountTo :endVal="totalNum"></CountTo>
        </span>
        <span>次</span>
      </div>
      <div class="shandong">
        <indicator class="qingdaogang-total" :value="totalQingdao" @click.native="viewPort('青岛港')"></indicator>
        <indicator class="yantaigang-total" :value="totalYantai" @click.native="viewPort('烟台港')"></indicator>
        <indicator class="rizhaogang-total" :value="totalRizhao" @click.native="viewPort('日照港')"></indicator>
        <indicator class="bohaiwangang-total" :value="totalBoHaiWan" @click.native="viewPort('渤海湾港')"></indicator>
      </div>
      <div class="work-statistic">
        <div class="work-list">
          <div class="work-list__row">
            <div class="work-list__item jianweixiuzuoye" @click="viewType('检维修作业')">
              <span class="work-list__item-label">检维修作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="jwxzy"></CountTo>
              </span>
            </div>
            <div class="work-list__item diaozhuangzuoye" @click="viewType('吊装作业')">
              <span class="work-list__item-label">吊装作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="dzzy"></CountTo>
              </span>
            </div>
            <div class="work-list__item gaochuzuoye" @click="viewType('高处作业')">
              <span class="work-list__item-label">高处作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="gczy"></CountTo>
              </span>
            </div>
          </div>
          <div class="work-list__row">
            <div class="work-list__item donghuozuoye" @click="viewType('动火作业')">
              <span class="work-list__item-label">动火作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="dhzy"></CountTo>
              </span>
            </div>
            <div class="work-list__item youxiankongjian" @click="viewType('有限空间')">
              <span class="work-list__item-label">有限空间</span>
              <span class="work-list__item-count">
                <CountTo :endVal="yxkj"></CountTo>
              </span>
            </div>
            <div class="work-list__item qitateshuzuoye" @click="viewType('其他作业')">
              <span class="work-list__item-label">其他作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="qttszy"></CountTo>
              </span>
            </div>
            <!-- <div class="work-list__item bankuaijituan">
              <span class="work-list__item-count">
                <CountTo :endVal="bkjt"></CountTo>
              </span>
            </div> -->
          </div>
          <div class="work-list__row">
            <div class="work-list__item chuanzhikaolibo" @click="viewType('船只靠离泊')">
              <span class="work-list__item-label">船只靠离泊</span>
              <span class="work-list__item-count">
                <CountTo :endVal="czklb"></CountTo>
              </span>
            </div>
            <div class="work-list__item xiacangzuoye" @click="viewType('下舱作业')">
              <span class="work-list__item-label">下舱作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="xczy"></CountTo>
              </span>
            </div>
            <div class="work-list__item xunjianzuoye" @click="viewType('巡检作业')">
              <span class="work-list__item-label">巡检作业</span>
              <span class="work-list__item-count">
                <CountTo :endVal="xjzy"></CountTo>
              </span>
            </div>
          </div>
        </div>
        <div class="bankuaijituan" @click="viewBkjt">
          <span class="bankuaijituan-count">
            <CountTo :endVal="bkjt"></CountTo>
          </span>
        </div>
      </div>
    </div>
    <div class="page-right">
      <div class="page-block rizhaogang" @click="viewPort('日照港')">
        <span class="page-block__text running">
          <CountTo :endVal="rizhaogang.running"></CountTo>
        </span>
        <span class="page-block__text finish">
          <CountTo :endVal="rizhaogang.finish"></CountTo>
        </span>
        <span class="page-block__text accumulative">
          <CountTo :endVal="rizhaogang.accumulative"></CountTo>
        </span>
      </div>
      <div class="page-block bohaiwangang" @click="viewPort('渤海湾港')">
        <span class="page-block__text running">
          <CountTo :endVal="bohaiwangang.running"></CountTo>
        </span>
        <span class="page-block__text finish">
          <CountTo :endVal="bohaiwangang.finish"></CountTo>
        </span>
        <span class="page-block__text accumulative">
          <CountTo :endVal="bohaiwangang.accumulative"></CountTo>
        </span>
      </div>
      <div class="page-block yuehuoyuedu">
        <yue-huo-yue-du :data="livelinessMonthList"></yue-huo-yue-du>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from '@/components/Process/CountTo.vue';
import Indicator from '@/components/Process/Indicator';
import RiHuoYueDu from '@/components/Process/RiHuoYueDu';
import YueHuoYueDu from '@/components/Process/YueHuoYueDu';
// import { getIndexData } from '@/apis';
import { one } from './demo';
export default {
  name: 'Home',
  components: { CountTo, Indicator, RiHuoYueDu, YueHuoYueDu },
  data() {
    return {
      qingdaogang: {
        running: 0,
        finish: 0,
        accumulative: 0,
      },
      yantaigang: {
        running: 0,
        finish: 0,
        accumulative: 0,
      },
      rizhaogang: {
        running: 0,
        finish: 0,
        accumulative: 0,
      },
      bohaiwangang: {
        running: 0,
        finish: 0,
        accumulative: 0,
      },
      totalNum: 0,
      dzzy: 0,
      gczy: 0,
      dhzy: 0,
      yxkj: 0,
      qttszy: 0,
      bkjt: 0,
      czklb: 0,
      xczy: 0,
      xjzy: 0,
      jwxzy: 0,
      totalQingdao: 0,
      totalYantai: 0,
      totalRizhao: 0,
      totalBoHaiWan: 0,
      livelinessList: [], // 日活跃度
      livelinessMonthList: [], // 月活跃度
    };
  },
  mounted() {
    // const loading = this.$loading({ target: '.main' });
    this.getIndexData();
    // loading.close();
    this.timerNum = setInterval(() => {
      this.getIndexData();
    }, 10000);
  },
  methods: {
    getIndexData() {
      // const { data } = await getIndexData();
      const data = one;

      // 作业统计
      this.dhzy = data.dhzy || 0; // 动火作业
      this.yxkj = data.yxkj || 0; // 有限空间
      this.qttszy = data.qttszy || 0; // 其他特殊作业
      this.bkjt = data.bkjt || 0; // 板块集团
      this.czklb = data.czklb || 0; // 船只靠离泊
      this.xczy = data.xczy || 0; // 下舱作业
      this.xjzy = data.xjzy || 0; // 巡检作业
      this.jwxzy = data.jwxzy || 0; // 检维修作业
      this.dzzy = data.dzzy || 0; // 吊装作业
      this.gczy = data.gczy || 0; // 高处作业

      // 日活跃度
      this.livelinessList = data.livelinessList || [];
      // 月活跃度
      this.livelinessMonthList = data.livelinessMonthList || [];

      // 港区统计
      const portDataList = data.portDataList;
      const defaultData = {
        running: 0,
        finish: 0,
        accumulative: 0,
      };
      this.qingdaogang = portDataList[0] || defaultData;
      this.rizhaogang = portDataList[1] || defaultData;
      this.bohaiwangang = portDataList[2] || defaultData;
      this.yantaigang = portDataList[3] || defaultData;

      this.totalQingdao = data.totalQingdao || 0;
      this.totalRizhao = data.totalRizhao || 0;
      this.totalBoHaiWan = data.totalBoHaiWan || 0;
      this.totalYantai = data.totalYantai || 0;

      // 总计
      this.totalNum = data.totalNum || 0;
    },
    viewPort(port) {
      this.$router.push({
        path: '/onePort',
        query: { port },
      });
    },
    viewType(type) {
      this.$router.push({
        path: '/work',
        query: { type },
      });
    },
    viewBkjt() {
      this.$router.push({
        path: '/oneType',
        query: { type: '板块集团' },
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timerNum);
  },
};
</script>
<style lang="less" scoped>
.page-home {
  width: 100%;
  height: 100%;
  padding-left: 48px;
  padding-right: 48px;
  display: flex;
  user-select: none;

  .page-left {
    width: 450px;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .page-center {
    flex: 1;
    height: 100%;
    padding: 10px 14px;

    .leiji {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 75px;
      background: url(~@/assets/svg/leiji.svg) center no-repeat;
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;

      .leiji__count {
        font-size: 32px;
        font-weight: 900;
        color: var(--primary-color);
        padding-bottom: 2px;
      }
    }

    .shandong {
      position: relative;
      width: 100%;
      height: 546px;
      background: url(~@/assets/svg/shandong.svg) center no-repeat;

      .qingdaogang-total {
        position: absolute;
        top: 166px;
        left: 543px;
        cursor: pointer;
      }

      .yantaigang-total {
        position: absolute;
        top: 30px;
        left: 621px;
        cursor: pointer;
      }

      .rizhaogang-total {
        position: absolute;
        top: 261px;
        left: 427px;
        cursor: pointer;
      }

      .bohaiwangang-total {
        position: absolute;
        top: -9px;
        left: 475px;
        cursor: pointer;
      }
    }

    .work-statistic {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 7px 16px;
      background: linear-gradient(2.04deg,
          rgba(46, 92, 181, 0.342) 1.83%,
          rgba(46, 92, 181, 0) 99.05%);
    }

    .work-list {
      margin-right: 16px;

      .work-list__row {
        display: flex;
        justify-content: space-between;

        .work-list__item {
          width: 160px;
          height: 66px;
          position: relative;
          cursor: pointer;

          .work-list__item-label {
            position: absolute;
            width: 90px;
            right: 5px;
            top: 10px;
            font-size: 14px;
            font-weight: 900;
            color: #ffffff;
            text-align: center;
          }

          .work-list__item-count {
            position: absolute;
            width: 90px;
            right: 5px;
            bottom: 8px;
            font-size: 18px;
            font-weight: 900;
            color: var(--primary-color);
            text-align: center;
          }

          &.bankuaijituan .work-list__item-count {
            width: 100%;
            left: 0;
            bottom: 22px;
            padding-left: 8px;
            font-size: 24px;
          }
        }

      }

      .donghuozuoye {
        background-image: url(~@/assets/svg/donghuozuoye.svg);
      }

      .youxiankongjian {
        background-image: url(~@/assets/svg/youxiankongjian.svg);
      }

      .qitateshuzuoye {
        background-image: url(~@/assets/svg/qitateshuzuoye.svg);
      }

      .chuanzhikaolibo {
        background-image: url(~@/assets/svg/chuanzhikaolibo.svg);
      }

      .xiacangzuoye {
        background-image: url(~@/assets/svg/xiacangzuoye.svg);
      }

      .xunjianzuoye {
        background-image: url(~@/assets/svg/xunjianzuoye.svg);
      }

      .jianweixiuzuoye {
        background-image: url(~@/assets/svg/jianweixiuzuoye.svg);
      }

      .gaochuzuoye {
        background-image: url(~@/assets/svg/gaochuzuoye.svg);
      }

      .gaochuzuoye {
        background-image: url(~@/assets/svg/gaochuzuoye.svg);
      }

      .diaozhuangzuoye {
        background-image: url(~@/assets/svg/diaozhuangzuoye.svg);
      }

      // @each $zuoye in donghuozuoye, youxiankongjian, qitateshuzuoye, chuanzhikaolibo, xiacangzuoye,
      // xunjianzuoye, jianweixiuzuoye, gaochuzuoye, diaozhuangzuoye {
      //   .#{$zuoye} {
      //     background: url('@/assets/svg/#{$zuoye}.svg');
      //   }
      // }
      .work-list__row+.work-list__row {
        margin-top: 16px;
      }
    }

    .bankuaijituan {
      position: relative;
      flex-shrink: 0;
      width: 377px;
      height: 246px;
      background: url(~@/assets/svg/bankuaijituan.svg);
      cursor: pointer;

      .bankuaijituan-count {
        position: absolute;
        width: 100%;
        left: 0;
        top: 78px;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        text-align: center;
      }
    }
  }

  .page-right {
    width: 450px;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .qingdaogang {
    background-image: url(~@/assets/svg/qingdaogang.svg);
  }

  .yantaigang {
    background-image: url(~@/assets/svg/yantaigang.svg);
  }

  .rihuoyuedu {
    background-image: url(~@/assets/svg/rihuoyuedu.svg);
  }

  .rizhaogang {
    background-image: url(~@/assets/svg/rizhaogang.svg);
  }

  .bohaiwangang {
    background-image: url(~@/assets/svg/bohaiwangang.svg);
  }

  .yuehuoyuedu {
    background-image: url(~@/assets/svg/yuehuoyuedu.svg);
  }

  .page-block {
    width: 100%;
    height: 278px;
    position: relative;
    cursor: pointer;



    // @each $gangkou in qingdaogang, yantaigang, rihuoyuedu, rizhaogang, bohaiwangang, yuehuoyuedu {
    //   &.#{$gangkou} {
    //     background: url('@/assets/svg/#{$gangkou}.svg');
    //   }
    // }

    .page-block__text {
      position: absolute;
      right: 46px;
      font-family: Alibaba PuHuiTi 3;
      font-size: 22px;
      font-weight: 1000;
      line-height: 1;
      text-align: right;
      color: var(--primary-color);
      text-shadow: 5px 10px 10px rgba(31, 191, 229, 0.55);

      &.running {
        top: 71px;
      }

      &.finish {
        top: 132px;
      }

      &.accumulative {
        top: 191px;
      }
    }
  }
}
</style>
